<template>
    <div>   
        <h1>房屋信息编辑</h1>
        <table class="table">
            <tr>
                <td>商铺编号</td>
                <td>
                    <input type="text" v-model="data.id" disabled>
                </td>
            </tr>

            <tr>
                <td>名称</td>
                <td>
                    <input type="text" v-model="data.hname">
                </td>
            </tr>

            <tr>
                <td>楼层</td>
                <td>
                    <select v-model="data.num">
                        <option value="">请选择楼层名称</option>
                        <option value="1层">1层</option>
                        <option value="2层">2层</option>
                        <option value="3层">3层</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>租户</td>
                <td>
                    <input type="text" v-model="data.name" >
                </td>
            </tr>

            <tr>
                <td>电话</td>
                <td>
                    <input type="text" v-model="data.phone" >
                </td>
            </tr>

            <tr>
                <td>建筑面积</td>
                <td>
                    <input type="text" v-model="data.mj">
                </td>
            </tr>

            <tr>
                <td>室内面积</td>
                <td>
                    <input type="text" v-model="data.mj">
                </td>
            </tr>

            <tr>
                <td>租金(元/平方)</td>
                <td>
                    <input type="text" v-model="data.price">
                </td>
            </tr>

            <tr>
                <td>状态</td>
                <td>
                    <select v-model="data.sid">
                        <option value="0">请选择状态</option>
                        <option v-for="d in xl" :value="d.sid">{{ d.sname }}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>备注说明</td>
                <td>
                    <textarea v-model="data.remark"></textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="button" value="编辑" class="btn btn-success" @click="upd">
                </td>
            </tr>
        </table>
        <a href="/">返回首页</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import { useRouter , useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()



onMounted(()=>{
    bang()
    ft()
})
//绑定
const xl=ref({})
const bang=()=>{
    axios.get("/api/House/GetStarts").then(res=>{
        xl.value=res.data
    })
}
const data=ref({
    "id": 0,
  "hname": "",
  "num": "",
  "name": "",
  "phone": "",
  "mj": 0,
  "price": 0,
  "sid": 0,
  "remark": "string"
})
//根据id获取一个房屋信息
const ft=()=>{
    axios.get("/api/House/GetId",{params:{id:route.query.id}}).then(res=>{
        data.value=res.data
    })
}
//修改
const upd=()=>{
    if(data.value.hname==""){
        alert('名称不能为空');
        return;
    }
    if(data.value.num==""){
        alert('楼层不能为空');
        return;
    }
    if(data.value.name==""){
        alert('租户不能为空');
        return;
    }
    if(data.value.phone==""){
        alert('手机号不能为空');
        return;
    }
    if(data.value.mj==0){
        alert('建筑面积不能为空');
        return;
    }
    if(data.value.mj==0){
        alert('室内面积不能为空');
        return;
    }
    if(data.value.price==0){
        alert('价格不能为空');
        return;
    }
    if(data.value.sid==0){
        alert('状态不能为空');
        return;
    }
    if(data.value.remark==""){
        alert('说明不能为空');
        return;
    }
    if(data.value.phone.length!=11){
        alert('手机号必须为11位');
        return;
    }
    axios.post("/api/House/UpdHouse",data.value).then(res=>{
        if(res.data>0){
            alert('修改成功');
            router.push("/")
        }
        else if(res.data==-1){
            alert('手机号不能重复');
            return;
        }
        else{
            alert('修改失败');
            return;
        }
    })
}
</script>

<style scoped>

</style>